<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useThemeStore } from '@/stores';
const sysTheme = useThemeStore();
function handleSystemThemeChange(event: any) {
  const theme = event.matches ? 'dark' : 'light';
  sysTheme.modifyTopic(theme);
}

onMounted(() => {
  const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
  darkModeQuery.addEventListener('change', handleSystemThemeChange);
});

onBeforeUnmount(() => {
  const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
  darkModeQuery.removeEventListener('change', handleSystemThemeChange);
});
</script>
<style>
.t-layout {
  background-color: rgba(0, 0, 0, 0) !important;
}
.t-layout__content {
  padding: 20px;
}
</style>
